<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <div class="demo-input-suffix">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-input
                        size="small"
                        placeholder="请输入订单Id"
                        prefix-icon="el-icon-search"
                        v-model="input1"
                >
                </el-input>
            </el-col>
            <el-col :span="6"> <el-button type="primary" @click="showOrderByOrderId" >查询</el-button></el-col>
        </el-row>
    </div>
    <template>
        <el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                @cell-mouse-enter="handleCurrentChange"
                style="width: 100%">
            <el-table-column
                    type="index"
                    width="50"
                    label="序号">
            </el-table-column>
            <el-table-column
                    property="productName"
                    label="产品名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    property="orderId"
                    label="订单号"
                    width="120">
            </el-table-column>
            <el-table-column
                    property="productPlanNo"
                    label="生产批次">
            </el-table-column>
            <el-table-column
                    property="pkind"
                    label="产品型号">
            </el-table-column>
            <el-table-column
                    property="number"
                    label="生产数量">
            </el-table-column>
            <el-table-column
                    property="dealTime"
                    label="下单时间">
            </el-table-column>
            <el-table-column
                    property="operator"
                    label="负责人">
            </el-table-column>

            <el-table-column
                    property="userTel"
                    label="用户电话">
            </el-table-column>
            <el-table-column
                    property="status"
                    label="状态">
            </el-table-column>
            <el-table-column label="操作">
                <el-button type="primary" icon="el-icon-s-order" @click="openProcess" circle></el-button>
            </el-table-column>
        </el-table>
    </template>
    <el-dialog title="生产过程" :visible.sync="dialogProcessVisible">
        <el-table :data="gridData">
            <el-table-column property="time" label="时间" width="150"></el-table-column>
            <el-table-column property="status" label="生产进度" width="200"></el-table-column>
        </el-table>
    </el-dialog>


    <el-row :gutter="20">
        <el-col :span="10">
             <span>
                第{{(current-1)*pageSize+1}}到{{current*pageSize}}条记录,总共{{total}}条
            </span>
        </el-col>
        <el-col :span="10">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="loadPage"
                    :current-page="current"
                    :page-sizes="[5,10,20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>


    </el-row>
</div>

<script src="/js/axios/axios.min.js"></script>
<script src="/js/vue/vue.js"></script>
<script src="/js/elementui/index.js"></script>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                tableData:null,
                total:0,
                current:1,
                pageSize:5,
                currentRow: null,
                order:{
                    id:'',
                    orderId:'',
                    productName:'',
                    productPlanNo:'',
                    pkind:'',
                    pnumber:'',
                    dealTime:'',
                    operator:'',
                    userTel:'',
                    status:''
                },
                gridData:null,
                dialogProcessVisible:false,
                input1:''
            }
        },
        methods:{
            setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
            },
            handleSizeChange(val) {
                this.pageSize=val;
                this.loadPage(1);
            },
            handleCurrentChange(val) {
            this.currentRow = val;
            },
            loadPage(current){
                this.current = current;
                if(this.input1==''){
                    axios.get("/orders/" + current+"/"+this.pageSize).then(value => {
                        if (value.data.code == 1) {
                        this.total = value.data.data.total;
                        this.tableData = value.data.data.records;
                        this.current = value.data.data.current;
                    }
                })}else{
                    axios.get("/orders/" + current+"/"+this.pageSize+"/"+this.input1).then(value => {
                        if (value.data.code == 1) {
                        this.total = value.data.data.total;
                        this.tableData = value.data.data.records;
                        this.current = value.data.data.current;
                    }
                 })

                }
            },
            openProcess(val){
                this.dialogProcessVisible=true;
                axios.get("/process?orderId="+this.currentRow.orderId).then(value=>{
                    if(value.data.code==1){
                        this.gridData=value.data.data;
                }
                })
            },
            showOrderByOrderId(){
                this.total = 0;
                this.tableData=null;
                this.current =1;
                this.loadPage(1);
            }
        },
        mounted(){
            this.loadPage(1);
        }
    });
</script>
</body>

</html>